<template>
  <div>
    <home-common-search v-if="!utils.getIsApp()" from="information" :value="value"></home-common-search>
    <div class="flex-wrapper" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <div class="information-main" v-for="item in articleList" v-bind:key="item.article_id" @click="goinformationdetail(item)">
        <div v-if="item.article_type == 1" class="information-type1">
          <div class="information-title">{{ item.article_title }}</div>
          <img v-if="item.article_pic.length" :src="item.article_pic[0]" class="information-bigimg" />
        </div>

        <div v-if="item.article_type == 2" class="information-type2">
          <div class="information-title">{{ item.article_title }}</div>
          <div class="information-moreimg">
            <img v-if="index < 3" v-for="(items, index) in item.article_pic" v-bind:key="items" :src="items" />
          </div>
        </div>

        <div v-if="item.article_type == 3" class="information-type3">
          <div class="information-left-title">{{ item.article_title }}</div>
          <img :src="item.article_pic[0]" class="information-smallimg" />
        </div>

        <div class="information-foot">
          <div class="foot-size">
            白茶时间<span class="foot-time">{{ gettime(item.article_time) }}</span>
          </div>
          <div class="foot-size">{{ item.click_count }}人阅读</div>
        </div>
      </div>
    </div>

    <!--        <div class="information-live">-->
    <!--             <video class="information-video"></video>-->
    <!--             <div class="information-live-title">-->
    <!--                 福鼎白茶的历史根源，看完之后，又学到不少知识-->
    <!--             </div>-->
    <!--        </div>-->
  </div>
</template>

<script>
import HomeCommonSearch from '../common/HomeCommonSearch';
import EmptyRecord from '../../EmptyRecord';
import { Toast, Indicator } from 'mint-ui';
import { getArticleSearch } from '../../../api/homeArticle';
// import { getArticleclassList } from '../../../api/homeArticle';
export default {
  name: 'Information',
  components: {
    HomeCommonSearch,
  },
  data() {
    return {
      articleclass_list: false,
      active: 0,
      article_type_name: '',
      ac_id: 1, // 文章分类ID
      articleList: [],
      params: { page: 0, per_page: 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      value: this.$route.query.keywords || '',
    };
  },
  mounted() {
    // Indicator.open();
    // getArticleclassList()
    //   .then((res) => {
    //     Indicator.close();
    //     this.articleclass_list = res.result.article_class;
    //   })
    //   .catch(function(error) {
    //     Indicator.close();
    //     Toast(error.message);
    //   });
  },
  methods: {
    loadMore() {
      this.loading = true;
      this.params.page = ++this.params.page;
      if (this.isMore) {
        this.loading = false;
        this.getArticleList(true);
      }
    },
    getArticleList() {
      Indicator.open();
      getArticleSearch(this.params, this.value || '')
        .then((res) => {
          Indicator.close();
          if (res.result.hasmore) {
            this.isMore = true;
          } else {
            this.isMore = false;
          }

          if (this.articleList) {
            this.articleList = this.articleList.concat(res.result.article_list);
          } else {
            this.articleList = res.result.article_list;
          }
          this.article_type_name = res.result.article_type_name;
        })
        .catch(function(error) {
          Indicator.close();
          Toast(error.message);
        });
    },
    goinformationdetail(item) {
      this.$router.push({ name: 'HomeInformationdetail', query: { article_id: item.article_id } });
    },
    switchmenu(id) {
      this.ac_id = id;
      this.articleList = [];
      this.params = { page: 0, per_page: 10 };
      this.isMore = true;
      this.loadMore();
    },
    gettime(t) {
      let _time = new Date(t * 1000);
      let year = _time.getFullYear(); //2017
      let month = _time.getMonth() + 1; //7
      let date = _time.getDate(); //10
      let hour = _time.getHours(); //10
      let minute = _time.getMinutes(); //56
      let second = _time.getSeconds(); //15
      return year + '-' + month + '-' + date;
    },
  },
};
</script>

<style scoped lang="scss">
.flex-wrapper{
  margin-top: 2.5rem;
}
::-webkit-scrollbar {
  display: none;
}
.information-menu {
  display: flex;
  overflow: scroll;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background: white;
  margin-top: 10px;
  padding: 5px 20px;
}

.menu-list {
  flex: none;
  padding: 5px 0;
  font-size: 0.6rem;
  border-bottom: 2px solid white;
  margin-right: 20px;
}

.menu-active {
  color: $primaryColor;
  border-bottom: 2px solid $primaryColor;
}

.information-main {
  background: white;
  margin-top: 10px;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
}

.information-type {
  display: flex;
  flex-direction: column;
}

.information-title {
  flex-wrap: wrap;
  font-size: 0.8rem;
  padding: 0.4rem 0;
  font-weight: bold;
}

.information-bigimg {
  width: 92vw;
  height: 40vw;
}

.information-moreimg {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.information-moreimg img {
  width: 29vw;
  height: 23.3vw;
}

.information-type3 {
  padding-top: 0.4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.information-left-title {
  width: 60vw;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: bold;
}

.information-smallimg {
  width: 28vw;
  height: 28vw;
}

.information-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}

.foot-size {
  font-size: 0.5rem;
  color: #b5b5b5;
}

.foot-time {
  margin-left: 1.2rem;
}

.information-live {
  margin-top: 10px;
  background: white;
  padding: 2vw 4vw;
}

.information-video {
  width: 92vw;
  height: 46vw;
}

.information-live-title {
  font-size: 0.7rem;
  font-weight: bold;
}
</style>
